<template>
  <!-- 订单管理 -->
  <div style="width: 100%">
    <!-- 页头 -->
    <div class="pageHeader">
      <el-page-header @back="goBack" content="订单管理"></el-page-header>
    </div>
    <!-- 搜索 -->
    <el-form :model="queryParams" size="small" :inline="true" class="search">
      <el-form-item label="订单状态">
        <el-select v-model="searchFome.status" placeholder="请选择订单状态">
          <el-option label="待支付" value="0"></el-option>
          <el-option label="已完成" value="1"></el-option>
          <el-option label="退货申请中" value="3"></el-option>
          <el-option label="退货成功" value="4"></el-option>
          <el-option label="拒绝退货" value="5"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          icon="el-icon-search"
          size="small"
          type="primary"
          plain
          @click="Search()"
          >搜索</el-button
        >
        <el-button
          icon="el-icon-delete"
          size="small"
          type="info"
          plain
          @click="reset()"
        >
          重置
        </el-button>
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <div style="width: 100%">
      <el-table :data="orderList" border>
        <el-table-column
          type="index"
          label="序号"
          width="50px"
          align="center"
        ></el-table-column>
        <el-table-column prop="order_number" label="订单编号" align="center">
        </el-table-column>
        <el-table-column prop="pictureUrl" label="图片" align="center">
          <template slot-scope="scope">
            <img
              style="width: 40%"
              :src="'http://127.0.0.1:8000' + scope.row.artwork.image"
              alt=""
            />
          </template>
        </el-table-column>
        <el-table-column prop="artwork.title" label="名称" align="center">
        </el-table-column>
        <el-table-column
          prop="artwork.artist.real_name"
          label="作者"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="scope">
            <el-tag type="primary" v-if="scope.row.status == '0'"
              >待支付</el-tag
            >
            <el-tag type="success" v-if="scope.row.status == '1'"
              >已完成</el-tag
            >
            <el-tag type="warning" v-if="scope.row.status == '2'"
              >已取消</el-tag
            >
            <el-tag type="warning" v-if="scope.row.status == '3'"
              >退货申请中</el-tag
            >
            <el-tag type="warning" v-if="scope.row.status == '4'"
              >退货成功</el-tag
            >
            <el-tag type="warning" v-if="scope.row.status == '5'"
              >拒绝退货</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          align="center"
          width="400px"
        >
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.status == '3'"
              @click="dispose(scope.row.id)"
              type="primary"
              size="small"
              plain
              >处理</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 处理弹框 -->
    <el-dialog
      title="处理退货订单"
      :visible.sync="returnVisible"
      width="30%"
      center
    >
      <span slot="footer" class="dialog-footer">
        <el-button @click="returnOrder('0')">拒绝退货</el-button>
        <el-button type="primary" @click="returnOrder('1')">同意退货</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getorders, postreturn } from "@/api/order";
import { mapState } from "vuex";
export default {
  data() {
    return {
      // 查询参数
      queryParams: {
        username: "",
        pageNum: 1,
        pageSize: 10,
      },
      // 搜索
      searchFome: {
        status: "",
      },
      orderinfoList: null,
      // 总页数
      total: 0,
      // 订单列表
      orderList: [],
      //  处理弹窗
      returnVisible: false,
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  created() {
    this.getorderList();
  },
  methods: {
    // 返回按钮
    goBack() {
      // 返回上一页
      this.$router.go(-1);
    },
    //获取订单列表
    getorderList() {
      getorders().then((res) => {
        this.orderList = res.results;
      });
    },

    // 重置密码
    resetpsw(userId) {
      resetpassword(userId)
        .then((res) => {
          this.$message.success("密码重置成功");
          this.getUserList();
        })
        .catch((error) => {
          this.$message.error("密码重置失败，请稍后重试");
          console.error("密码重置失败：", error);
        });
    },

    // 处理按钮
    dispose(row) {
      this.id = row;
      console.log(this.id);
      this.returnVisible = true;
    },
    // 退货处理
    returnOrder(action) {
      postreturn(this.id, action)
        .then((res) => {
          console.log(res);
          this.$message.success("处理成功！");
          this.getorderList();
        })
        .catch((err) => {
          console.log(err);
          this.$message.success("处理失败！");
        });
      this.returnVisible = false;
    },
    // 搜索
    Search() {
      // 备份原始出库列表
      if (!this.orderinfoList) {
        this.orderinfoList = [...this.orderList];
      }

      // 过滤项目列表
      this.orderList = this.orderinfoList.filter((item) => {
        let match = true;
        for (let key in this.searchFome) {
          const searchValue = this.searchFome[key]; // 搜索条件
          const itemValue = item[key]; // 表格数据
          if (
            typeof searchValue === "string" &&
            typeof itemValue === "string"
          ) {
            // 字符串
            if (!itemValue.includes(searchValue)) {
              match = false;
              break;
            }
          } else if (searchValue !== "" && typeof itemValue === "boolean") {
            // 布尔型
            if (JSON.parse(searchValue) !== itemValue) {
              match = false;
              break;
            }
          } else if (searchValue !== "") {
            // 数值型
            if (Number(searchValue) !== itemValue) {
              match = false;
              break;
            }
          }
        }
        return match;
      });
    },
    // 重置
    reset() {
      this.searchFome = {
        status: "",
      };
      this.getorderList();
      return;
    },
  },
};
</script>

<style lang="less" scoped>
.pageHeader {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 10px;
  height: 15vh;
}
.el-form {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 20px;
}
.visible {
  display: flex;
  flex-direction: column;
}
.el-pagination {
  position: absolute;
  right: 20px;
  padding: 20px;
}
</style>
